<template>
  <div class="migration-manager">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="migration-card">
          <template #header>
            <span>步骤 1：导入全局配置</span>
          </template>
          <el-form :model="importForm" ref="importFormRef" label-width="110px">
            <el-form-item
              label="配置文件路径"
              prop="filePath"
              :rules="[{ required: true, message: '请输入文件路径', trigger: 'blur' }]">
              <el-input v-model="importForm.filePath" placeholder="例如：./config.json" clearable />
            </el-form-item>
            <el-form-item label=" " colon>
              <el-button type="primary" :loading="importing" @click="handleImport">
                {{ importing ? '导入中...' : '导入全局配置' }}
              </el-button>
            </el-form-item>
          </el-form>

          <el-alert
            v-if="importResult"
            :type="importResult.type"
            :title="importResult.message"
            show-icon
            class="result-alert" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="migration-card">
          <template #header>
            <span>步骤 2：迁移账号配置</span>
          </template>

          <el-alert
            title="该操作会为所有已有账号创建基于当前激活全局配置的默认配置"
            type="info"
            :closable="false"
            class="info-alert" />

          <div class="action-area">
            <el-button type="success" :loading="migrating" @click="handleMigrate">
              {{ migrating ? '迁移中...' : '迁移账号配置' }}
            </el-button>
          </div>

          <el-result
            v-if="migrationResult"
            :icon="migrationResult.success > 0 ? 'success' : 'info'"
            :title="`成功：${migrationResult.success}，跳过：${migrationResult.skipped}`"
            :sub-title="migrationResult.message"
            class="result-box" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { http } from '@/utils/request'

const importFormRef = ref()
const importForm = reactive({
  filePath: './config.json'
})

const importing = ref(false)
const importResult = ref(null)

const migrating = ref(false)
const migrationResult = ref(null)

const handleImport = async () => {
  if (!importFormRef.value) return
  try {
    await importFormRef.value.validate()
    importing.value = true
    const response = await http.post('/migration/import-global-config', {
      filePath: importForm.filePath
    })
    importResult.value = {
      type: 'success',
      message: `导入成功：${response.data.name}`
    }
    ElMessage.success('全局配置导入成功')
  } catch (error) {
    if (error?.message) {
      importResult.value = {
        type: 'error',
        message: error.message
      }
      ElMessage.error(error.message)
    }
  } finally {
    importing.value = false
  }
}

const handleMigrate = async () => {
  try {
    migrating.value = true
    const response = await http.post('/migration/migrate-account-configs')
    migrationResult.value = response.data
    ElMessage.success('账号配置迁移完成')
  } catch (error) {
    migrationResult.value = {
      success: 0,
      skipped: 0,
      message: error.message || '迁移失败'
    }
    ElMessage.error(error.message || '迁移失败')
  } finally {
    migrating.value = false
  }
}
</script>

<style lang="scss" scoped>
.migration-manager {
  .migration-card {
    min-height: 260px;

    .result-alert {
      margin-top: 16px;
    }

    .info-alert {
      margin-bottom: 20px;
    }

    .action-area {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 20px;
    }

    .result-box {
      padding: 0;

      :deep(.el-result__extra) {
        margin-top: 8px;
      }
    }
  }
}
</style>
